<template>
	<view class="add-address">
		<NavBar :title="title"/>
		<view class="content">
			<view class="address-info">
				<uni-forms ref="formRef" :rules="rules" :model="valiFormData">
					<uni-forms-item name="name">
						<view class="item">
							<view class="label"> 收货人 </view>
							<uni-easyinput class="easy-input" v-model="valiFormData.name" placeholder="请填写收货人姓名" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="phone">
						<view class="item">
							<view class="label"> 联系方式 </view>
							<uni-easyinput class="easy-input" v-model="valiFormData.phone" placeholder="请填写收货人手机号" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="region">
						<view class="item">
							<view class="label"> 地区 </view>
							<view class="value">
								<view class="text" :class="regionName?'a-text':''">
									<picker @change="change" mode="multiSelector" :range="cityList" range-key="label" @columnchange="columnchange">
										{{ regionName?regionName:'请选择地区' }}
									</picker>
								</view>
								<image src="/static/icon/order/right.png" class="right" />
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="addr">
						<view class="item">
							<view class="label"> 详细地址 </view>
							<uni-easyinput class="easy-input" v-model="valiFormData.addr" placeholder="请填写详细地址街道/门牌号等" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item>
						<view class="item default">
							<view class="label"> 设为默认 </view>
							<view class="check" :class="valiFormData.is_default ==1?'checked':''" @tap="iSChecked"> </view>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="recognize">
					<view class="reco-item">
						<view class="label"> 智能识别 </view>
						<view class="value sb" @tap="parse"> 识别 </view>
					</view>
					<textarea v-model="textarea" class="textarea" placeholder="粘贴收货人姓名、手机号、收货地址，可识别您的收货信息" placeholder-style="font-size: 14px;color: #C4C4C4;" />
				</view>
			</view>
		</view>
		<view class="btn" @tap="save"> 保存 </view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
  import AddressParse from 'address-parse';
	import NavBar from '@/components/NavBar.vue';
	import { useAddressStore } from '@/store/index.js';
	import { isMobile, isNull } from '@/utils/valdate.js'
	import { GetRegionApi, AddAddressApi, EditAddressApi } from '@/service/index.js'
	const formRef = ref()
	const title = ref('新增地址')
	const rules = {
		name: isNull('姓名'),
		phone: isMobile(),
		region: isNull('地区'),
		addr: isNull('详细地址'),
	}
	const valiFormData = ref({
		name: '',
		phone: '',
		region: '', // 省市区省市区接口所得
		addr: '', // 详细地址
		is_default: '1', //1默认 0不默认
	})
	const regionName = ref('')
	const cityList = ref([[],[],[]])
	const textarea = ref('')
  const columnchange = (e) => {
		const { detail } = e
		console.log(detail);
		if(detail.column === 2) return
		let region = cityList.value[detail.column][detail.value].value
		getRegion(region, detail.column)
	}
	const change = (e) => {
		let arr = []
		e.detail.value.forEach((item, index) => {
			arr.push(cityList.value[index][item].label)
			if(index == 2) [
				valiFormData.value.region = cityList.value[index][item].value
			]
		})
		regionName.value = arr.join(' ')
	}
	const getRegion = (region,index) => {
		GetRegionApi({region}).then(res => {
			cityList.value[index+1] = res
			if(index == 0) {
				GetRegionApi({region: cityList.value[index+1][0].value}).then(sec => {
					cityList.value[index+2] = sec
				})
			}
		})
	}
  const parse = () => {
    const address = AddressParse.parse(textarea.value)[0]
    valiFormData.value.name = address.name
    valiFormData.value.phone = address.mobile
    valiFormData.value.region = address.code
    valiFormData.value.addr = address.details
    regionName.value = address.province + '/' + address.city + '/' + address.area
    textarea.value = ''
  }
	const iSChecked = () => {
		if(valiFormData.value.is_default==0) valiFormData.value.is_default = 1
		else valiFormData.value.is_default = 0
	}
	const save = () => {
		const { SETADDRESS, lonlat } = useAddressStore()
		formRef.value.validate().then(() => {
			let params = { 
				...valiFormData.value,
				latitude: lonlat.latitude,
				longitude: lonlat.longitude
				}
			if(title.value == '新增地址') {
				AddAddressApi(params).then(res => {
					SETADDRESS()
					uni.navigateBack()
				})
			} else {
				EditAddressApi(params).then(res => {
					SETADDRESS()
					uni.navigateBack()
				})
			}
		})
	}
	onLoad((e) => {
		const { address } = e
		if(address) {
			title.value = '编辑地址'
			const { id, name, phone, region, addr, is_default } = JSON.parse(address)
			valiFormData.value = { id, name, phone, region, addr, is_default }
      // console.log(JSON.parse(address).modify_region.name);
			regionName.value = JSON.parse(address).modify_region.name
		}
		GetRegionApi().then(res => {
			cityList.value[0] = res
			GetRegionApi({region: cityList.value[0][0].value}).then(sec => {
				cityList.value[1] = sec
				GetRegionApi({region: sec[0].value}).then(thi => {
					cityList.value[2] = thi
				})
			})
		})
	})
</script>

<style scoped lang="scss">
	.add-address {
		// padding: 0 12px 14px;
		.content {
			padding: 10px 12px;
			// background-color: #fff;
			.address-info {
				border-radius: 10px;
				padding: 0 16px 14px;
				background-color: #fff;
				.uni-forms-item {
					margin-bottom: 0;
					align-items: center;
					height: 50px;
					border-bottom: 1px solid #eeeeee;
					box-sizing: border-box;
					.item {
            width: 100% !important;
						height: 50px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						.label {
							color: #333333;
							font-size: 16px;
							font-weight: 400;
							margin-right: 10px;
						}
						.value {
							flex: 1;
							color: #c4c4c4;
							font-size: 14px;
							font-weight: 400;
							line-height: 14px;
							margin-left: 10px;
							padding-right: 10px;
							display: flex;
							align-items: center;
							justify-content: end;
							.text {
								flex: 1;
								color: #c4c4c4;
								font-size: 14px;
								font-weight: 400;
								line-height: 14px;
								text-align: right;
                &.a-text {
                  color: #333;
                }
							}
							.right {
								width: 14px;
								height: 14px;
							}
						}
							.check {
								height: 28px;
								width: 40px;
								background: url('/static/icon/mine/switch.png') no-repeat center center;
								background-size: 100% 100%;
								&.checked {
									background: url('/static/icon/mine/a-switch.png') no-repeat center center;
									background-size: 100% 100%;
								}
							}
						.easy-input {
							flex: 1;
							color: #333;
							font-size: 14px;
							font-weight: 400;
							text-align: right;
							margin-left: 10px;
						}
					}
				}
				:deep(.uni-forms-item__error) {
					left: 0;
					top: 100%;
					right: 12px;
					font-size: 12px;
					text-align: right;
					padding-bottom: 3px;
					transform: translateY(-100%);
				}
				.recognize {
					padding-top: 16px;
					.reco-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10px;
						.label {
							color: #333333;
							font-size: 16px;
							font-weight: 400;
							line-height: 20px;
						}
						.value {
							color: #008FF4;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
						}
					}
					.textarea {
						width: 100%;
						height: 110px;
						padding: 10px;
						color: #333;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
						background: #F7F7F7;
						border-radius: 10px;
						box-sizing: border-box;
					}
				}
			}
		}
		.btn {
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			background: #FF3B1E;
			border-radius: 106px;
			position: fixed;
			left: 12px;
			right: 12px;
			bottom: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
  .default {
    width: calc(100vw - 56px);
    justify-content: space-between;
  }
</style>